
<template>
  <div class="mytree">
    <el-tree
      ref="tree"
      id="tree"
      class="tree"
      :indent="0"
      :data="data"
      highlight-current
      node-key="menuId"
      default-expand-all
      :props="defaultProps"
      @node-click="handleNodeClick"
    >
      <div
        class="custom-tree-node"
        slot-scope="{data}"
        :style="[
          { paddingLeft: data._level > 3 ? `${(data._level - 3) * 30}px` : '' },
        ]"
      >
        <span>
          <icon-svg :name="data.icon"></icon-svg>{{ data.menuName }}
        </span>
      </div>
    </el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "label",
        disabled: this.disabledFn,
      },
    };
  },
  props: {
    data: {
      type: Array,
    },
    isShow: {
      type: Boolean,
    },
  },
  methods: {
    disabledFn() {
      if (this.isShow) {
        return true;
      }
    },
    handleNodeClick(data) {
      // console.log(data);
      this.$emit("editTitile", data);
    },
    renderContent(h, { node, data, store }) {
      // console.log(node, data, store);
    },
  },
  created() {
    // console.log(this.isShow, "111");
  },
  mounted() {},
};
</script>

<style lang="less">
#tree
  > .el-tree-node
  > .el-tree-node__content
  > .el-tree-node__expand-icon.is-leaf {
  display: block !important;
}
.mytree {
  #tree .icon-svg {
    background-color: #f9f9f9;
    position: absolute;
    z-index: 99;
  }
  .el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content
    .icon-svg {
    background-color: #f0f7ff !important;
  }
  #tree .el-tree-node .icon-svg {
    width: 26px;
    height: 26px;
    left: 10px;
  }
  // 二级icon
  #tree .el-tree-node .el-tree-node__children .el-tree-node .icon-svg {
    width: 18px;
    height: 18px;
    left: 4px;
  }
  // 三级icon
  #tree
    .el-tree-node
    .el-tree-node__children
    .el-tree-node
    .el-tree-node__children
    .el-tree-node
    .icon-svg {
    width: 14px;
    height: 14px;
    left: 6px;
  }
  .el-tree .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  .el-tree-node__content {
    padding: 6px 0px;
  }
  .el-tree .el-icon-caret-right:before {
    background: url("../assets/img/insure/shousuo.png") no-repeat 0 0px;
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    font-size: 18px;
    background-size: 100%;
  }
  .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
    background: url("../assets/img/insure/zhankai.png") no-repeat 0 0px;
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    font-size: 18px;
    background-size: 100% 100%;
  }
}
.mytree {
  .el-tree > .el-tree-node:after {
    border-top: none;
  }
  .el-tree-node .el-tree-node {
    position: relative;
  }
  #tree > .el-tree-node .el-tree-node .el-tree-node__content {
    padding-left: 48px !important;
  }
  #tree
    > .el-tree-node
    .el-tree-node__children
    .el-tree-node
    .el-tree-node__children
    .el-tree-node
    .el-tree-node__content {
    padding-left: 78px !important;
  }
  //节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉
  .el-tree-node__expand-icon.is-leaf {
    display: none;
  }

  .el-tree-node :last-child:before {
    height: 38px;
  }
  .el-tree > .el-tree-node:after {
    border-top: none;
  }

  .tree .el-tree-node:before {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:after {
    content: "";
    left: 24px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }
  .tree > .el-tree-node:before {
    border-left: 1px dashed #4386c6;
    bottom: 0px;
    height: calc(100% - 70px);
    top: 34px;
    left: 22px;
    width: 1px;
    z-index: 98;
  }
  .el-tree-node:after {
    border-top: 1px dashed #4386c6;
    height: 20px;
    top: 18px;
    width: 24px;
  }
  #tree
    .el-tree-node
    .el-tree-node__children
    .el-tree-node
    .el-tree-node__children
    .el-tree-node:after {
    width: 48px;
    content: "";
    left: 24px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }
    #tree
    .el-tree-node
    .el-tree-node__children
    .el-tree-node
    .el-tree-node__children
    .el-tree-node
    .el-tree-node__children
    .el-tree-node:after {
    width: 72px;
    content: "";
    left: 24px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }
}
</style>